<!DOCTYPE html>
<html>
  <head>
    <title>Filter Debug Test</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        padding: 20px;
      }
      .test-item {
        padding: 10px;
        margin: 5px 0;
        border: 1px solid #ccc;
        border-radius: 4px;
        display: flex;
        justify-content: space-between;
      }
      .hidden {
        display: none !important;
      }
      .controls {
        margin-bottom: 20px;
      }
      input,
      select {
        margin: 0 10px;
        padding: 5px;
      }
      .debug {
        background: #f0f0f0;
        padding: 10px;
        margin: 10px 0;
        font-family: monospace;
      }
    </style>
  </head>
  <body>
    <h2>Filter Logic Debug Test</h2>

    <div class="controls">
      <input type="text" id="searchInput" placeholder="Search..." />
      <select id="statusSelect">
        <option value="">All Status</option>
        <option value="free">Free</option>
        <option value="pro trial">Pro Trial</option>
        <option value="pro plan">Pro Plan</option>
        <option value="business">Business</option>
        <option value="empty">Empty Status</option>
      </select>
      <button onclick="applyFilter()">Apply Filter</button>
      <button onclick="resetFilter()">Reset</button>
    </div>

    <div class="debug" id="debugOutput"></div>

    <div id="itemsList">
      <div class="test-item" data-account-name="user1">
        <span>user1@example.com</span>
        <span class="status">free</span>
      </div>
      <div class="test-item" data-account-name="user2">
        <span>user2@example.com</span>
        <span class="status">pro trial</span>
      </div>
      <div class="test-item" data-account-name="user3">
        <span>user3@example.com</span>
        <span class="status">pro</span>
      </div>
      <div class="test-item" data-account-name="user4">
        <span>user4@example.com</span>
        <span class="status">business</span>
      </div>
      <div class="test-item" data-account-name="user5">
        <span>user5@example.com</span>
        <span class="status"></span>
      </div>
    </div>

    <script>
      const testAccounts = [
        { name: "user1", email: "user1@example.com", status: "free" },
        { name: "user2", email: "user2@example.com", status: "pro trial" },
        { name: "user3", email: "user3@example.com", status: "pro plan" },
        { name: "user4", email: "user4@example.com", status: "business" },
        { name: "user5", email: "user5@example.com", status: "" },
      ];

      const filters = {
        search: "",
        status: "",
      };

      function updateDebug(message) {
        const debug = document.getElementById("debugOutput");
        debug.innerHTML += message + "<br>";
        console.log(message);
      }

      function clearDebug() {
        document.getElementById("debugOutput").innerHTML = "";
      }

      function applyFilter() {
        clearDebug();

        filters.search = document
          .getElementById("searchInput")
          .value.toLowerCase();
        filters.status = document
          .getElementById("statusSelect")
          .value.toLowerCase();

        updateDebug(
          `Filter settings: search="${filters.search}", status="${filters.status}"`
        );

        const accountItems = document.querySelectorAll(".test-item");
        let visibleCount = 0;

        accountItems.forEach((accountItem) => {
          const accountName = accountItem.getAttribute("data-account-name");
          const account = testAccounts.find((acc) => acc.name === accountName);

          if (!account) {
            accountItem.style.display = "none";
            updateDebug(`❌ Account not found: ${accountName}`);
            return;
          }

          const accountStatus = (account.status || "").toLowerCase();
          const accountEmail = (
            account.email ||
            account.name ||
            ""
          ).toLowerCase();

          updateDebug(
            `🔍 Processing: ${account.name}, status="${accountStatus}", email="${accountEmail}"`
          );

          const matchesSearch =
            !filters.search ||
            account.name.toLowerCase().includes(filters.search) ||
            accountEmail.includes(filters.search) ||
            accountStatus.includes(filters.search);

          let matchesStatus = true;
          if (filters.status && filters.status !== "") {
            if (filters.status === "empty") {
              matchesStatus = !accountStatus || accountStatus === "";
            } else {
              matchesStatus = accountStatus === filters.status;
            }
          }

          const shouldShow = matchesSearch && matchesStatus;
          accountItem.style.display = shouldShow ? "flex" : "none";

          updateDebug(
            `   matchesSearch=${matchesSearch}, matchesStatus=${matchesStatus}, shouldShow=${shouldShow}`
          );

          if (shouldShow) {
            visibleCount++;
          }
        });

        updateDebug(
          `📊 Result: ${visibleCount}/${testAccounts.length} items visible`
        );
      }

      function resetFilter() {
        document.getElementById("searchInput").value = "";
        document.getElementById("statusSelect").value = "";
        filters.search = "";
        filters.status = "";

        document.querySelectorAll(".test-item").forEach((item) => {
          item.style.display = "flex";
        });

        clearDebug();
        updateDebug("Filters reset - all items visible");
      }

      // Auto-apply filter on input changes
      document
        .getElementById("searchInput")
        .addEventListener("input", applyFilter);
      document
        .getElementById("statusSelect")
        .addEventListener("change", applyFilter);

      // Initial load
      resetFilter();
    </script>
  </body>
</html>
